<template>
  <div class="row">
    <div class="col-3">
      <h3>Draggable 1</h3>
      <draggable class="list-group" :list="list1" group="people" @change="log">
        <div class="list-group-item" v-for="(element, index) in list1" :key="element.name">{{ element.name }} {{ index }}</div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 2</h3>

      <draggable class="list-group" :list="list2" group="people" @change="log">
        <div class="list-group-item" v-for="(element, index) in list2" :key="element.name">{{ element.name }} {{ index }}</div>
      </draggable>
    </div>

    <!-- <rawDisplayer class="col-3" :value="list1" title="List 1" />

    <rawDisplayer class="col-3" :value="list2" title="List 2" /> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

import draggable from 'vuedraggable';
@Component({
  components: { draggable }
})
export default class Drag extends Vue {
  list1 = [
    { name: 'John', id: 1 },
    { name: 'Joao', id: 2 },
    { name: 'Jean', id: 3 },
    { name: 'Gerard', id: 4 }
  ];
  list2 = [
    { name: 'Juan', id: 5 },
    { name: 'Edgard', id: 6 },
    { name: 'Johnson', id: 7 }
  ];
  log = (evt: unknown) => {
    window.console.log(evt);
  };
  // mounted() {}
}
</script>
<style scoped>
.row {
  display: flex;
  width: 400px;
  justify-content: space-between;
  margin: 0 auto;
}
.col-3 {
  border: 1px solid #ccc;
  padding: 10px;
}
.list-group-item {
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #ccc;
}
</style>
